<template>
  <div id="app">
    <div class="header">
      <img src="@/assets/images/Vector 25.png" alt="">
    </div>
    <div class="logo">
      <img src="@/assets/images/Subtract.png" alt="">
      <p>BuddyParty</p>
    </div>
    <h3 class="login">Login in</h3>
    <!-- 表单 -->
    <van-form @submit="onSubmit" class="form">
      <span class="number">+91</span>
      <van-field class="user" v-model="form.model.phone" />
      <van-field class="pwd" v-model="code" type="password" placeholder="Verification code" />
      <div class="send" @click="yzm" v-if="!isyzm">Send</div>
      <div class="send" v-if="isyzm">{{ num + 's' }}</div>
      <div>
        <van-button round block type="info" native-type="submit" class="btn">Login in</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from 'axios'
import { encryptHex, decryptHex } from '@/utils/aes'
// import { denglu } from '@/api/index'
import { getYzm, denglu } from '@/api/index'
import { Toast } from 'vant'
export default {
  name: 'App',
  data() {
    return {
      //表单数据
      form: {
        model: {
          phone: '',
          phoneCode: '+91',
        }
      },
      //验证码
      code: '',
      //判断是否为验证码
      isyzm: false,
      //倒计时时间
      num: 0
    }
  },
  methods: {
    //登录
    async onSubmit() {
      const form = JSON.stringify({ phone: this.form.model.phone, phoneCode: '+91', code: this.code })
      const res = await denglu(encryptHex(form, null))
      // 解密
      const abc = JSON.parse(decryptHex(res.data, 'phxEAn7fC2CwrATM'))
      console.log('----------', abc)
      Toast('Login Succeeded')
      //修改登录信息为true
      this.$store.commit('logining')
      //存入用户数据
      this.$store.dispatch('user/getUserInfo', abc.user)
      this.$router.push('/shouye')
    },
    //发送验证码
    async yzm() {
      //判断用户输入九位数
      if (this.form.model.phone.length <= 9) {
        let form = JSON.stringify(this.form);
        // 加密
        const res = await getYzm(encryptHex(form, null))
        // const res2 = JSON.parse(decryptHex(res, 'phxEAn7fC2CwrATM'))
        Toast(res.data.message)
        console.log(res, '========')
        // 解密
      } else {
        let form = JSON.stringify(this.form);
        // 加密
        const res = await getYzm(encryptHex(form, null))
        this.djs()
        const result = JSON.parse(decryptHex(res.data, 'phxEAn7fC2CwrATM'))
        Toast('Sending succeeded')
        console.log('result', result)
      }
    },
    //倒计时
    djs() {
      this.isyzm = true
      this.num = 60
      let timer = setInterval(() => {
        this.num--
        if (this.num < 0) {
          this.isyzm = false
          clearInterval(timer)
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
@a: 3.75vw;

.header {
  width: (315/@a);
  height: (233/@a);
  padding-left: (60/@a);
  margin-bottom: (25/@a);

  img {
    width: 100%;
  }
}

.logo {
  position: absolute;
  text-align: center;
  width: (145/@a);
  height: (105/@a);
  left: (210/@a);
  top: (48/@a);

  img {
    width: (61/@a)
  }

  p {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: (20/@a);
    /* identical to box height */


    color: #FFFFFF;
  }
}

.login {
  margin-left: (35/@a);
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: (24/@a);
  line-height: (58/@a);
  /* identical to box height */
  margin-bottom: 0;

  color: #101010;
}

.form {
  width: (290/@a);
  margin-left: (35/@a);
  position: relative;

  .send {
    position: absolute;
    background-color: transparent;
    top: (80/@a);
    right: (30/@a);
    width: (20/@a);
    height: (20/@a);
    color: #8242FF;
    border: 0px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: (14/@a);
    line-height: (17/@a);
    /* identical to box height */

    text-decoration-line: underline;
  }

  .number {
    position: absolute;
    top: (12/@a);
    left: (12/@a);
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: (16/@a);
    /* identical to box height */


    color: #8242FF;
  }

  .btn {
    background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
    border-radius: (20/@a);
    margin-top: (40/@a);
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: (15/@a);
    line-height: (44/@a);
    /* identical to box height */


    color: #FFFFFF;
  }

  .user {
    background: #FFFFFF;
    opacity: 0.3;
    border: (2/@a) solid #8342FF;
    border-radius: (10/@a);
    margin-bottom: (20/@a);
    padding-left: (50/@a);
  }

  .pwd {
    background: #FFFFFF;
    opacity: 0.3;
    border: (2/@a) solid #8342FF;
    border-radius: (10/@a);

    &::placeholder {
      color: #C0C0C0;
    }
  }
}
</style>
